<template>
	<view>
		<view class="userlist">
			<view class="useritem" v-for="(item,index) in list" :key="item.id">
				<view class="left">
					<image v-if="item.head_url == null" src="/static/img/logo.png"></image>
					<image v-else :src="item.head_url">
						<view class="info">
							<view class="name">
								{{item.name}}
							</view>
							<view class="level_name">
								{{item.level_name}}
							</view>
							<view class="add_time">
								{{item.add_time}}
							</view>
						</view>
				</view>
				<view class="right">
					<text> {{item.team}}</text>
					<text> {{item.username}}</text>
				</view>
			</view>
		</view>
		<view class="no-list" v-if="list.length == 0">
			<image src="/static/img/e.png" mode="widthFix"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		UserTeam
	} from "@/api/user.js"
	export default {
		data() {
			return {
				list: [1, 2, 3]
			}
		},

		onLoad() {
			this.UserTeam()
		},
		methods: {
			UserTeam() {
				UserTeam().then(res => {
					this.list = res.data
				})
			}

		}
	}
</script>
<style lang="scss">
	page {
		background: #0F172A;
		padding-top: 10px;
	}

	.useritem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background: #1E293B;
		color: #fff;
		width: 96%;
		margin: 0 auto;
		border-radius: 8px;
		margin-bottom: 10px;
		box-sizing: border-box;

		image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}

		.left {
			display: flex;
			align-items: center;

			.info {
				padding-left: 15px;

				.name {
					font-size: 14px;
				}

				.level_name {
					margin: 2px 0;
					font-size: 13px;
					color: #fff;
				}

				.add_time {
					font-size: 12px;
					color: #f2f2f2;
				}
			}
		}

		.right {
			font-size: 12px;
			border-left: 1px solid #ccc;
			padding: 5px 0;
			padding-left: 10px;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}
	}
</style>